$logo-width: 200px;
$menubar-bg: #324157;
#app {
    margin: 0 auto;
    background-color: #eaedf1;
    /** main content page wrapper */
    .wrapper {
        padding-top: 60px;
        height: 100%;
        /* 头部导航 */
        header {
            z-index: 1000;
            transition: all 0.5s ease;
            /*border-top: solid 4px #30n91F2;*/
            background-color: $menubar-bg; // box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
            &.header-fixed {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
            }
            .el-menu {
                background-color: #3c8dbc !important; // padding-left: 220px !important;
                .el-menu-item {
                    color: #FFF;
                    font-size: 18px;
                    font-weight: 400;
                    margin: 0px 10px;
                    padding: 0;
                    &.logo {
                        width: $logo-width;
                        text-align: center;
                        font-size: 20px;
                        font-weight: 400;
                        margin: 0;
                        border-bottom: transparent !important;
                    }
                    &:hover,
                    &.is-active {
                        background-color: #3c8dbc;
                        border-bottom: 3px solid #FFF;
                    }
                    a {
                        height: 100%;
                        padding: 0 10px;
                        display: block;
                    }
                }
            }
            .profile {
                right: 0;
                top: 0;
                position: absolute;
                height: 60px;
                line-height: 60px;
                .el-dropdown-link {
                    font-size: 12px;
                    position: relative;
                    display: inline-block;
                    padding-left: 10px;
                    padding-right: 20px;
                    color: #fff;
                    cursor: pointer;
                    vertical-align: middle;
                }
                .avatar {
                    height: 40px;
                    border-radius: 50%;
                    padding: 10px 8px 10px 8px;
                    float: left;
                }
            }
        }
        .menu {
            text-align: left;
            background-color: $menubar-bg;
            width: $logo-width;
            display: block;
            position: absolute;
            top: 60px;
            left: 0;
            bottom: 0;
            .el-menu {
                background-color: transparent !important;
                .el-menu-item {
                    color: #FFF;
                    font-size: 16px;
                    font-weight: 400;
                    padding-left: 36px;
                    padding-right: 4px;
                    &.is-active {
                        background-color: #1F2D3D;
                        border-right: 4px solid #3c8dbc;
                        padding-right: 0px;
                    }
                    &:hover {
                        background-color: #1F2D3D;
                    }
                }
            }
        }
        .container {
            margin-left: $logo-width; // padding-bottom: 20px;
            width: auto;
            height: calc(100% - 60px);
            overflow-y: auto;
            overflow-x: auto;
            .breadcrumb {
                margin: 10px 16px;
                text-align: right;
                display: block;
                height: 20px;
                line-height: 20px; 
                font-size: 14px;
            }
            /*
            .content {
                margin: 8px;
                padding: 16px;
                background-color: #fff;
                min-height: calc(100% - 56px); // (8+16)*2 + 8
                width: auto;
            }*/
            > .content {
                margin: 0px 16px 8px 16px;
                padding: 16px;
                background-color: #fff;
                min-height: calc(100% - 80px); // 16*2(padding)+40(breadcrumb)+8(bottom)
                width: auto;
            }
        }
        /* 主内容区
        .container {
            margin: 10px 10px 0 10px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            min-height: 100%;
            background-color: #FCFCFC;
        } */
    }
}
